<!--
 * @Description: 
 * @Version: 
 * @Autor: ps
 * @Date: 2022-09-08 11:43:43
 * @LastEditors: ps
 * @LastEditTime: 2022-09-12 19:52:20
-->
<template>
  <div>
    <el-tabs
      v-if="false"
      ref="tabs"
      v-model="activeName"
      class="text-tabs TTB-no-gutter TTB-gutter"
      @tab-click="change"
    >
      <el-tab-pane label="负载电价设置" name="LoadTariff"></el-tab-pane>
      <el-tab-pane label="分时段设置" name="Dayparting"></el-tab-pane>
      <el-tab-pane label="远程调试" name="RemoteDebugging"></el-tab-pane>
      <el-tab-pane label="升级组件" name="Upgrade"></el-tab-pane>
      <el-tab-pane label="远程设置流水" name="Water"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" :ref="activeName"></component>
  </div>
</template>
<script>
import LoadTariff from "@/views/work/remote/components/loadTariff";
import Dayparting from "@/views/work/remote/components/dayparting";
import Water from "@/views/work/remote/components/water";
import Upgrade from "@/views/work/remote/components/upgrade";
import RemoteDebugging from "@/views/work/remote/components/remoteDebugging";

export default {
  components: {
    LoadTariff,
    Dayparting,
    Water,
    Upgrade,
    RemoteDebugging,
  },
  data() {
    return {
      activeName: "LoadTariff",
    };
  },
  created() {
    this.activeName = this.$route.name;
  },
  methods: {
    change() {
      const index = this.$refs.tabs.value;
      if (this.activeName === index) {
        return false;
      }
      // this.$refs[index].initData();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .text-tabs {
  .el-tabs__active-bar {
    width: 79px;
  }
  .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
    opacity: 0.8;
  }
}
</style>